[#ftl]
[#--include "../../util.ftl"/--]		
[@define "agile.dijit.ColorPalette" "agile._Component" "ColorPalette=dijit/ColorPalette"]
	//category:"ColorPalette Component"
	widgetName:"ColorPalette"
	[#assign templateString][#compress]
		<div class='agileComponent agileColorPalette'>
			<div data-dojo-type="dijit/ColorPalette" data-dojo-props='palette:"3x4"' data-dojo-attach-point="palette3x4" style="display:none"></div>				
			<div data-dojo-type="dijit/ColorPalette" data-dojo-props='palette:"7x10"' data-dojo-attach-point="palette7x10" style="display:none"></div>
		</div>		
	[/#compress][/#assign]
	,templateString:"${templateString?js_string}"
	,styleConstraints:agile.delegate(agile._Component.prototype.styleConstraints,{
		"height":{_ignore:true},"width":{_ignore:true}
	})
	,attributes:agile.delegate(agile._Component.prototype.attributes,{
		palette:lang.mixin({},agile.ComboMetadata,{
			label:"i18n_palette",options:[{value:"3x4",label:"3x4"},{value:"7x10",label:"7x10"}]
			,onValueChange:function(/*widget*/widget,/*String*/name,/*Object*/value){
				//widget.metadata(name,value);
				widget.metadata(this.metadataCategory +"."+name,value);
				if(value == "3x4"){
			    	style.set(widget.palette3x4.domNode,"display","block");
			    	style.set(widget.palette7x10.domNode,"display","none");
			    }else{
			    	style.set(widget.palette3x4.domNode,"display","none");
			    	style.set(widget.palette7x10.domNode,"display","block");
			    }	
				widget.delegate = widget["palette"+value];
			}
		})	
		,value:lang.mixin({},agile.TextMetadata,{
			label:"i18n_color",_readOnly:true
//			,toHtml:function(value,widget,sourceType){
//				if(value){
//					return  'value="\''+value+'\'" ';
//				}
//				return "";
//			}
		})		
	})
	,events:agile.delegate(agile._Component.prototype.events,{
			"onChange": {_ignore:false}
	})
	,initDefaultMetadata:function(){
//		this.inherited(arguments);
		this.metadata("parameters.palette","7x10");	
	}
	,constructor:function(){
//		this.metadata("parameters.palette","7x10");		
		this.metadata("dojoDeclaredClass","dijit/ColorPalette");
//		this.metadata("moveable",true);
//		agile.requireX("dijit.ColorPalette");
	}
	,init:function(){
		if(this._initColorPalette){
			return;
		}
		this._initColorPalette = true;
		
		if(this.metadata("parameters.palette") == "3x4"){
	    	style.set(this.palette3x4.domNode,"display","block");
	    	this.delegate = this.palette3x4;
	    }else{
	    	style.set(this.palette7x10.domNode,"display","block");
	    	this.delegate = this.palette7x10;
	    }
		this.palette3x4.watch("value",lang.hitch(this,function(name,old,hexColor){										
			//topic.publish("agile.widget.changed",this.category,"value",hexColor);					
			this.metadata("parameters.value",hexColor);
		}));
		this.palette7x10.watch("value",lang.hitch(this,function(name,old,hexColor){										
			//topic.publish("agile.widget.changed",this.category,"value",hexColor);					
			this.metadata("parameters.value",hexColor);
		}));
		
		aspect.after(this.palette3x4.domNode,"onmousedown",lang.hitch(this,function(event){
			topic.publish("agile.widget.changed",this.category,"value",event.target.title);
			if(!this._selected){
				topic.publish("agile.widget.selected",this);
			}
		}),true);
		aspect.after(this.palette7x10.domNode,"onmousedown",lang.hitch(this,function(event){
			topic.publish("agile.widget.changed",this.category,"value",event.target.title);
			if(!this._selected){
				topic.publish("agile.widget.selected",this);				
			}
		}),true);
	}
	,_getDelegatePrototype:function(){
		return ColorPalette.prototype;
	}
[/@]		
